<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>用户注册</title>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">



</head>
<body>
<div class="wrapper-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-12 col-xs-12">
                <div class="card">
                    <div class="card-header border-bottom text-center">
                        <h4 class="card-title">立即注册</h4>
                    </div>
                    <div class="card-body">
                        <form class="form-horizontal m-t-20">
                            <div class="form-group">
                                <div style="color:red;height: 24px;" id="phoneTiShi" ></div>
                                <input class="form-control" type="text" required="" placeholder="请输入手机号" id="phone" maxlength="11">
                            </div>
                            <div class="form-group">
                                <div style="color:red;height: 24px;" id="passwdTiShi" ></div>
                                <input class="form-control" type="password" required="" placeholder="请输入密码" id="passwd">
                            </div>

                            <div class="form-group" hidden="hidden">
                                <input class="form-control" type="text" id="referId" th:value="${referId}">
                            </div>
                            <div class="form-group" hidden="hidden">
                                <input hidden="hidden" id="userType" value="0">
                            </div>
                            <div class="form-group">

                            </div>
                            <div class="form-group text-center m-t-20">
                                <button class="btn btn-common btn-block" type="button" onclick="register()" id="btn">用户注册</button>
                            </div>
                            <div class="form-group m-t-10 mb-0">
                                <div class="text-center">
                                    <a th:href="@{/front/user/login}" class="text-muted">已有账号？</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

      <!--  <div class="row">
            <div class="alert alert-success fade in">
                <button type="button" id="modelAlert" class="close">&times</button>
                <span>注册成功</span>
            </div>
        </div>-->


    </div>
</div>

<div id="preloader">
    <div class="loader" id="loader-1"></div>
</div>

<script th:src="@{/assets/js/jquery-min.js}"></script>
<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.app.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script th:src="@{/assets/js/bootbox.min.js}"></script>

</body>



<script>
    var flag = false;
    var flag2 = false;
    $(function () {
        $("#phone").blur(function(){
            var phone = $("#phone").val();
            var pattern = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
            var isFlag = pattern.test(phone);
            if(!isFlag){
                $("#phoneTiShi").text("手机号格式错误");
                flag = false;
            }else {
                $("#phoneTiShi").text("");
                flag = true;
            }
        });


        $("#passwd").blur(function(){
            var reg = /^.{6,}$/;
            var passwd = $("#passwd").val();
            if(!reg.test(passwd)){
                $("#passwdTiShi").text("密码至少六位");
                flag2=false;
            }else{
                $("#passwdTiShi").text("");
                flag2 =true;
            }
        });
    });

    function register() {
        var phone = $("#phone").val();
        var passwd = $("#passwd").val();
        var phoneTiShi = $("#phoneTiShi");
        if (phone == null || phone === "" || phone === undefined) {
            $("#phoneTiShi").text("请输入手机号");
            flag = false;
        }
        if (passwd == null || passwd === "") {
            $("#passwdTiShi").text("请输入密码");
            flag2 = false;
        }
        if(flag === true&&flag2 === true){
            $.post("/front/user/sureRegister",
                {   "phone": phone,
                    "passwd": passwd,
                    "referId": $("#referId").val(),
                    "userType": $("#userType").val()
                },
                function (data) {
                    if (data.isSuccess == "true") {
                        bootbox.alert("注册成功", function(){
                            window.open("/front/user/login","_self");
                        });
                    } else {
                        phoneTiShi.show();
                        phoneTiShi.html(data.message);
                    }
                }
            )
        }

    }
</script>

</html>